<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Ajax实现用户登录</title>
    <style>
        #main{
            height: 1000px;
            background: #ccc;
            margin: 20px 0;
        }
        #loginInfo{
            font-size: 12px;
            color: red;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            // 为按钮绑定点击事件
            $('#btnLogin').on('click',function(){

                console.log($('#myform').serialize())

                // 发送Ajax异步请求
                $.ajax({
                    type:'get',
                    url:'http://127.0.0.1:8080/ajax/login',
                    // data:{
                    //     username:$('#username').val(),
                    //     password:$('#password').val()
                    // },
                    data:$('#myform').serialize(), // 序列化，获取表单中所有具有name属性的参数值
                    dataType:'json',
                    success:function(res){
                        console.log(res)
                        if(res.status == 1){
                            localStorage.setItem("account",JSON.stringify(res.data))
                            $('#login').html('欢迎您：' + res.data.name)
                        }else if(res.status == 2){
                            $('#loginInfo').html('登录失败，用户名或密码不正确！')
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div id="login">
        <form id="myform">
            <label for="username">用户名：</label><input type="text" id="username" name="username">
            <label for="password">密码：</label><input type="password" id="password" name="password">
            <input type="button" value="登录" id="btnLogin">
            <span id="loginInfo"></span>
        </form>
    </div>
    <div id="main">

    </div>
</body>
</html>